<template>
    <div>
        我的头像
          <!-- <el-form-item label="活动形式">
            <el-input type="textarea" v-model="desc"></el-input>
          </el-form-item> -->
          <div class="myavatar">
        <el-image 
            style="width: 200px; height: 200px"
            :src="url" 
            :preview-src-list="src">
        </el-image>
          <!-- action为上传的地址 -->
        <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        accept="image/jpeg,image/gif,image/png"
        :before-upload="onBeforeUpload"
        :limit='1'
        :on-exceed="handleExceed"
        >
              <el-button>点击上传头像</el-button>
        </el-upload>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            url:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            src:['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'],
    }
},
methods: {
    onBeforeUpload(file)
    {
      const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!')
      }
      return isIMAGE && isLt1M;
    },
    handleExceed(){
        this.$message.error('一次只能上传一个文件')
    },
    getavatar(){
        //获取用户头像
    }
},
created() {
    this.getavatar()
},
}
</script>
<style scoped>
.el-image {
    border-radius: 50%;
    
}
.myavatar{
    text-align: center;
}
</style>